{\rtf1\ansi\ansicpg1252\cocoartf2639
\cocoatextscaling0\cocoaplatform0{\fonttbl\f0\fswiss\fcharset0 Helvetica;}
{\colortbl;\red255\green255\blue255;\red0\green0\blue0;}
{\*\expandedcolortbl;;\cssrgb\c0\c0\c0;}
\paperw12240\paperh15840\vieww11520\viewh8400\viewkind0
\deftab720
\pard\pardeftab720\partightenfactor0

\f0\fs24 \cf2 \expnd0\expndtw0\kerning0
\outl0\strokewidth0 \strokec2 @gray-darker:               #444444;\
@gray-dark:                 #696969;\
@gray:                      #999999;\
@gray-light:                #cccccc;\
@gray-lighter:              #ececec;\
@gray-lightest:             lighten(@gray-lighter,4%);\
\uc0\u8232 \
*,\
*::before,\
*::after \{ \
  box-sizing: border-box;\
\}\
\uc0\u8232 \
html \{\
  background-color: #f0f0f0;\
\}\
\uc0\u8232 \
body \{\
  color: @gray;\
  font-family: 'Roboto','Helvetica Neue', Helvetica, Arial, sans-serif;\
  font-style: normal;\
  font-weight: 400;\
  letter-spacing: 0;\
  padding: 1rem;\
  text-rendering: optimizeLegibility;\
  -webkit-font-smoothing: antialiased;\
  -moz-osx-font-smoothing: grayscale;\
  -moz-font-feature-settings: "liga" on;\
\}\
\uc0\u8232 \
img \{\
  height: auto;\
  max-width: 100%;\
  vertical-align: middle;\
\}\
\uc0\u8232 \
.btn \{\
  background-color: white;\
  border: 1px solid @gray-light;\
  //border-radius: 1rem;\
  color: @gray-dark;\
  padding: 0.5rem;\
  text-transform: lowercase;\
\}\
\uc0\u8232 \
.btn--block \{\
  display: block;\
  width: 100%;\
\}\
 \
.cards \{\
  display: flex;\
  flex-wrap: wrap;\
  list-style: none;\
  margin: 0;\
  padding: 0;\
\}\
\uc0\u8232 \
.cards__item \{\
  display: flex;\
  padding: 1rem;\
  @media(min-width: 40rem) \{\
    width: 50%;\
  \}\
  @media(min-width: 56rem) \{\
    width: 33.3333%;\
  \}\
\}\
\uc0\u8232 \
.card \{\
  background-color: white;\
  border-radius: 0.25rem;\
  box-shadow: 0 20px 40px -14px rgba(0,0,0,0.25);\
  display: flex;\
  flex-direction: column;\
  overflow: hidden;\
  &:hover \{\
    .card__image \{\
      filter: contrast(100%);\
    \}\
  \}\
\}\
\uc0\u8232 \
.card__content \{\
  display: flex;\
  flex: 1 1 auto;\
  flex-direction: column;\
  padding: 1rem;\
\}\
\uc0\u8232 \
.card__image \{\
  background-position: center center;\
  background-repeat: no-repeat;\
  background-size: cover;\
  border-top-left-radius: 0.25rem;\
  border-top-right-radius: 0.25rem;\
  filter: contrast(70%);\
  //filter: saturate(180%);\
  overflow: hidden;\
  position: relative;\
  transition: filter 0.5s cubic-bezier(.43,.41,.22,.91);;\
  &::before \{\
    content: "";\
	  display: block;\
    padding-top: 56.25%; // 16:9 aspect ratio\
  \}\
  @media(min-width: 40rem) \{\
    &::before \{\
      padding-top: 66.6%; // 3:2 aspect ratio\
    \}\
  \}\
\}\
\uc0\u8232 \
.card__image--flowers \{\
  background-image: url(https://unsplash.it/800/600?image=82);\
\}\
\uc0\u8232 \
.card__image--river \{\
  background-image: url(https://unsplash.it/800/600?image=11);\
\}\
\uc0\u8232 \
.card__image--record \{\
  background-image: url(https://unsplash.it/800/600?image=39);\
\}\
\uc0\u8232 \
.card__image--fence \{\
  background-image: url(https://unsplash.it/800/600?image=59);\
\}\
\uc0\u8232 \
.card__title \{\
  color: @gray-dark;\
  font-size: 1.25rem;\
  font-weight: 300;\
  letter-spacing: 2px;\
  text-transform: uppercase;\
\}\
\uc0\u8232 \
.card__text \{\
  flex: 1 1 auto;\
  font-size: 0.875rem;\
  line-height: 1.5;\
  margin-bottom: 1.25rem;\
\}\
\uc0\u8232 \
\uc0\u8232 \
}